<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{estateName}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="item.value" v-for="(item,index) in estateData" :key="index">
              {{item.label}}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="18">
        <el-tabs class="my-define-tab2" size="mini" type="card">
          <el-tab-pane v-for="(item,index) in tabList" :key="index">
            <template slot="label">
              {{item.label}}
            </template>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'top-header',
    props: {
      tabList: {
        type: Array,
        default: () => ([])
      }
    },
    data() {
      return {
        estateName: '',
        estateData: [],
        estateId: null
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        this.estateData = this.$store.getters && this.$store.getters.estateData;
        this.setData()
      },
      handleCommand(value) {
        localStorage.setItem('chosen_estate_id', value)
        this.setData()
      },
      setData() {
        this.estateId = localStorage.getItem('chosen_estate_id')
        var list = this.estateData.filter((item) => {
          return item.value == this.estateId
        })
        this.estateName = list.length > 0 ? list[0].label : '请选择'
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
